import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/model/watch_model.dart';
import 'package:syn_4s/ui/shared/app_theme.dart';

import '../../core/utils/date_format_utils.dart';
import '../../core/viewmodel/main_view_model.dart';
import 'custom_ui.dart';
import 'main_fold.dart';

class MainSmartWatch extends StatefulWidget {
  final Key? scrollKey;
  final MainViewModel viewModel;
  final String? title;

  const MainSmartWatch({super.key, required this.viewModel, this.scrollKey,this.title});

  @override
  State<MainSmartWatch> createState() => _MainSmartWatchState();
}

class _MainSmartWatchState extends State<MainSmartWatch> {
  final ScrollController _controller = ScrollController();

  @override
  void initState() {
    super.initState();
    addScrollListener(_controller, widget.viewModel.isWatchScrollable);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MainFold(
      scrollKey: widget.scrollKey,
      title: widget.title??context.l10n.smart_watch,
      child: Container(
        margin: EdgeInsets.only(left: 8.px, right: 8.px, bottom: 6.px),
        height: 230.px,
        child: Obx(() => ListView.separated(
              controller: _controller,
              physics: widget.viewModel.isWatchScrollable.value
                  ? const AlwaysScrollableScrollPhysics()
                  : const NeverScrollableScrollPhysics(),
              separatorBuilder: (ctx, index) {
                return Divider(
                  height: 4.px,
                  color: Colors.transparent,
                );
              },
              itemBuilder: (ctx, index) {
                return buildItem(context, widget.viewModel.watches[index]);
              },
              itemCount: widget.viewModel.watches.length,
            )),
      ),
    );
  }

  Widget buildItem(BuildContext context, Watch watch) {
    bool offline = (watch.state ?? 0) == 0;
    Color? dataColor = offline ? AppTheme.redColor : null;
    return Container(
      padding: EdgeInsets.only(left: 5.px),
      decoration:
          BoxDecoration(border: Border.all(color: Colors.white, width: 1.px)),
      child: IntrinsicHeight(
        child: Row(
          children: [
            VerticalDivider(
              color: offline ? AppTheme.redColor : AppTheme.greenColor,
              width: 6.px,
              thickness: 6.px,
              indent: 4.px,
              endIndent: 4.px,
            ),
            buildInfo(context, watch),
            Container(
              width: 1.px,
              color: Colors.white,
            ),
            buildTopBottom(
                context, context.l10n.heart_rate, getBaseData(watch, "hr"),
                color: dataColor),
            Container(
              width: 1.px,
              color: Colors.white,
              margin: EdgeInsets.symmetric(vertical: 16.px),
            ),
            buildTopBottom(
                context, context.l10n.body_temp, getBaseData(watch, "temp"),
                color: dataColor),
          ],
        ),
      ),
    );
  }

  WatchBaseData? getBaseData(Watch watch, String code) {
    return watch.baseData?.firstWhere(
      (watchData) => watchData.code == code,
    );
  }

  Widget buildInfo(BuildContext context, Watch watch) {
    return Expanded(
        flex: 2,
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 2.px, horizontal: 6.px),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                watch.staffName ?? "",
                style: TextStyle(fontSize: 18.px),
              ),
              buildLongText(DateFormatUtils.dateTimeToStr(watch.portalOWAt,
                  format: "dd-MM-yyyy HH:mm:ss")),
              buildLongText("${context.l10n.address}${watch.address ?? ""}"),
            ],
          ),
        ));
  }

  Widget buildLongText(String data) {
    return Text(
      data,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    );
  }

  Widget buildTopBottom(BuildContext context, String title, WatchBaseData? data,
      {Color? color}) {
    return Expanded(
        child: Container(
      margin: EdgeInsets.symmetric(vertical: 2.px, horizontal: 4.px),
      child: Column(
        children: [
          Text(
            data?.val ?? "",
            style: TextStyle(
                color: color ?? AppTheme.textColor,
                fontWeight: FontWeight.w900,
                fontSize: 20.px),
          ),
          Text(
            textAlign: TextAlign.center,
            title,
          ),
        ],
      ),
    ));
  }
}
